<template>
<!--产品映射参数-->

<Card style="height:800px">
  <header>
    <span style="vertical-align:middle">版本:</span>
    <Select v-model="productVersion" @on-change="productVersionCheck" style="width:180px">
        <Option v-for="item in productVersionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    <span style="width: 200px;margin-left: 20px;vertical-align:middle">产品大类:</span>
    <Select v-model="productType" @on-change="productTypeCheck" style="width:180px">
        <Option v-for="item in productTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    <span style="width: 200px;margin-left: 20px;vertical-align:middle">产品细类:</span>
    <Select v-model="productCode" style="width:180px">
        <Option v-for="item in productCodeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    <span style="width: 200px;margin-left: 20px;vertical-align:middle">期限:</span>
    <Select v-model="tenor" style="width:180px">
        <Option v-for="item in tenorList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    <span style="width: 200px;margin-left: 20px;vertical-align:middle">评级:</span>
    <Select v-model="grate" style="width:180px">
        <Option v-for="item in gradeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    <Button type="primary" @click="query"  style="margin-left: 20px;">查询</Button>
    <Button type="primary" @click="handleRouteGo('cpyscsaddiview')" style="margin-left: 10px;">新增</Button>
  </header>
  <Content style="margin-top:20px;">
    <Table border :columns="columns1" :data="data1"></Table>
  </Content>
  <div style="text-align:center;width:50%;margin:100px auto;">
    <Page :total="total" :current="currentPage" :page-size="pageSize" show-elevator show-total @on-change="handlePageChange"></Page>
  </div>
</Card>
</template>

<script>
export default {
  data () {
    return {
      submit: '',
      gdh: null,
      currentSelect: null,
      productVersion: null,
      productVersionList: [],
      productType: null,
      secondChannelName: null,
      productTypeList: [],
      productCode: null,
      productCodeList: [],
      tenor: null,
      tenorList: [],
      grate: null,
      gradeList: [],
      firstChannelList: [],
      firstChannel: null,
      secondChannelList: [],
      secondChannel: null,
      thirdChannelList: [],
      thirdChannel: null,
      isManPriceList: [{
        value: '1',
        label: '否'
      },
      {
        value: '0',
        label: '是'
      }
      ],
      man: null,
      displayMonthlyRate: null,
      compositeMonthlyRate: null,
      columns1: [{
        title: '版本',
        key: 'productVersion',
        width: 150,
        align: 'center'
      },
      {
        title: '渠道',
        key: 'channelName',
        width: 90,
        align: 'center'
      },
      {
        title: '产品大类',
        key: 'productTypeName',
        width: 150,
        align: 'center'
      },
      {
        title: '产品细类',
        key: 'productName',
        width: 130,
        align: 'center'
      },
      {
        title: '期限',
        key: 'tenor',
        width: 100,
        align: 'center'
      },
      {
        title: '评级',
        key: 'grateName',
        width: 100,
        align: 'center'
      },
      {
        title: '一级渠道',
        align: 'center',
        width: 150,
        key: 'firstChannelList',
        render: (h, params) => {
          var vm = this
          var channelLvlName = params.row.firstOrgName
          return h('div', [
            vm.submit !== params.row.id + '' &&
              h(
                'div', {
                  props: {
                    value: vm.data1[params.index].firstOrgCode
                  }
                },
                channelLvlName
              ),
            vm.submit === params.row.id + '' &&
              h(
                'Select', {
                  props: {
                    value: vm.data1[params.index].firstOrgCode
                  },
                  on: {
                    'on-change': value => {
                      vm.templateData1[params.index].firstOrgCode = value
                      let lengthFirst = vm.firstChannelList.length
                      for (let i = 0; i < lengthFirst; i++) {
                        let oneSelect = vm.firstChannelList[i]
                        if (oneSelect.value === value) {
                          vm.templateData1[params.index].firstOrgName = oneSelect.label
                          break
                        }
                      }
                      vm.getOrgInfoList(value, 2, params.index, 'Y')
                    }
                  }
                },
                this.firstChannelList.map(function (type) {
                  return h(
                    'Option', {
                      props: {
                        value: type.value + ''
                      }
                    },
                    type.label
                  )
                })
              )
          ])
        }
      },
      {
        title: '二级渠道',
        align: 'center',
        width: 150,
        key: 'secondChannelList',
        render: (h, params) => {
          var vm = this
          var secondChannelName = params.row.secondOrgName
          return h('div', [
            vm.submit !== params.row.id + '' &&
              h(
                'div', {
                  props: {
                    value: vm.data1[params.index].secondOrgCode
                  }
                },
                secondChannelName
              ),
            vm.submit === params.row.id + '' &&
              h(
                'Select', {
                  props: {
                    value: vm.data1[params.index].secondOrgCode
                  },
                  on: {
                    'on-change': value => {
                      vm.templateData1[params.index].secondOrgCode = value
                      let lengthSecond = vm.secondChannelList.length
                      for (let i = 0; i < lengthSecond; i++) {
                        let oneSelect = vm.secondChannelList[i]
                        if (oneSelect.value === value) {
                          vm.templateData1[params.index].secondOrgName = oneSelect.label
                          break
                        }
                      }
                      vm.getOrgInfoList(value, 3, params.index, 'Y')
                    }
                  }
                },
                this.secondChannelList.map(function (type) {
                  return h(
                    'Option', {
                      props: {
                        value: type.value + ''
                      }
                    },
                    type.label
                  )
                })
              )
          ])
        }
      },
      {
        title: '团队',
        align: 'center',
        width: 120,
        key: 'thirdChannelList',
        render: (h, params) => {
          var vm = this
          // const thirdOrgCode = params.row.thirdOrgCode
          var thirdOrgCodeName = params.row.thirdOrgName
          return h('div', [
            vm.submit !== params.row.id + '' &&
              h(
                'div', {
                  props: {
                    value: vm.data1[params.index].thirdOrgCode
                  }
                },
                thirdOrgCodeName
              ),
            vm.submit === params.row.id + '' &&
              h(
                'Select', {
                  props: {
                    value: vm.data1[params.index].thirdOrgCode
                  },
                  on: {
                    'on-change': value => {
                      vm.templateData1[params.index].thirdOrgCode = value
                      let lengthThird = vm.thirdChannelList.length
                      for (let i = 0; i < lengthThird; i++) {
                        let oneSelect = vm.thirdChannelList[i]
                        if (oneSelect.value === value) {
                          vm.templateData1[params.index].thirdOrgName = oneSelect.label
                          break
                        }
                      }
                    }
                  }
                },
                this.thirdChannelList.map(function (type) {
                  return h(
                    'Option', {
                      props: {
                        value: type.value + ''
                      }
                    },
                    type.label
                  )
                })
              )
          ])
        }
      },
      {
        title: '展示月费率',
        key: 'displayMonthlyRate',
        align: 'center',
        width: 100,
        render: (h, params) => {
          var vm = this

          return h('div', [
            vm.submit !== params.row.id + '' &&
              h(
                'div', {
                  props: {
                    value: vm.data1[params.index].displayMonthlyRate
                  }
                },
                vm.data1[params.index].displayMonthlyRate
              ),
            vm.submit === params.row.id + '' &&
              h('Input', {
                props: {
                  value: vm.data1[params.index].displayMonthlyRate
                },
                on: {
                  'on-change': e => {
                    vm.templateData1[params.index].displayMonthlyRate =
                      e.target.value + ''
                  }
                }
              })
          ])
        }
      },
      {
        title: '综合月费率',
        key: 'compositeMonthlyRate',
        align: 'center',
        width: 100,
        render: (h, params) => {
          var vm = this

          return h('div', [
            vm.submit !== params.row.id + '' &&
              h(
                'div', {
                  props: {
                    value: vm.data1[params.index].compositeMonthlyRate
                  }
                },
                vm.data1[params.index].compositeMonthlyRate
              ),
            vm.submit === params.row.id + '' &&
              h('Input', {
                props: {
                  value: vm.data1[params.index].compositeMonthlyRate
                },
                on: {
                  'on-change': e => {
                    vm.templateData1[params.index].compositeMonthlyRate =
                      e.target.value + ''
                  }
                }
              })
          ])
        }
      },
      {
        title: '人工定价',
        align: 'center',
        key: 'isManPrice',
        width: 102,
        render: (h, params) => {
          var vm = this
          const isManPrice = params.row.isManPrice
          var isManPriceName = ''
          for (var i = 0; i < vm.isManPriceList.length; i++) {
            if (vm.isManPriceList[i].value === isManPrice) {
              isManPriceName = vm.isManPriceList[i].label
              break
            }
          }
          return h('div', [
            vm.submit !== params.row.id + '' &&
              h(
                'div', {
                  props: {
                    value: vm.data1[params.index].isManPrice
                  }
                },
                isManPriceName
              ),
            vm.submit === params.row.id + '' &&
              h(
                'Select', {
                  props: {
                    value: vm.data1[params.index].isManPrice
                  },
                  on: {
                    'on-change': value => {
                      vm.templateData1[params.index].isManPrice =
                        value
                    }
                  }
                },
                this.isManPriceList.map(function (type) {
                  return h(
                    'Option', {
                      props: {
                        value: type.value
                      }
                    },
                    type.label
                  )
                })
              )
          ])
        }
      },
      {
        title: '操作',
        align: 'center',
        width: 150,
        render: (h, param, index) => {
          var vm = this
          var id = param.row.id + ''
          return h('div', [
            (vm.submit !== id || vm.submit === '') &&
              h(
                'Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    click () {
                      sessionStorage.setItem('cpyscs1', '' + param.row.id)
                      vm.submit = param.row.id + ''
                      let reqParams = {}
                      reqParams.parentOrgCode = '-1'
                      reqParams.channelId = param.row.channel
                      vm.$ajax.post(vm.$appContext.marvels_core_product + 'product/mcpt/service/findOrgInfoList', reqParams).then(re => {
                        vm.firstChannelList = re.data.data
                        let len = vm.firstChannelList.length
                        for (let i = 0; i < len; i++) {
                          vm.firstChannelList[i].value = vm.firstChannelList[i].orgCode
                          vm.firstChannelList[i].label = vm.firstChannelList[i].orgName
                        }
                      }).catch(er => {})
                      // console.log('xxxxxxxx' + vm.data1[param.index].firstOrgCode)
                      vm.getOrgInfoList(vm.data1[param.index].firstOrgCode, 2, param.index)
                      // console.log('sssssssssss' + vm.data1[param.index].secondOrgCode)
                      vm.getOrgInfoList(vm.data1[param.index].secondOrgCode, 3, param.index)
                    }
                  }
                },
                '编辑'
              ),
            vm.submit === id &&
              h(
                'Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    click () {
                      sessionStorage.setItem('cpyscs1', '')
                      vm.submit = ''
                      var params = vm.templateData1[param.index]
                      // console.log(params)
                      vm.$ajax
                        .post(
                          vm.$appContext.marvels_core_product + 'product/mcpt/service/modifyProductMapped',
                          params
                        )
                        .then(re => {
                          var tmp = JSON.parse(
                            JSON.stringify(vm.templateData1)
                          )
                          vm.data1 = tmp
                        })
                        .catch(er => {})
                    }
                  }
                },
                '保存'
              ),
            h(
              'Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginLeft: '13px'
                },
                on: {
                  click: () => {
                    if (!confirm('确认删除?')) {
                      return
                    }
                    this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/modifyProductMapped', {
                      id: param.row.id,
                      deleteFlag: 1
                    })
                      .then(re => {
                        if (re.data.code === 'success') {
                          // let data1 = JSON.parse(JSON.stringify(vm.data1))
                          // data1.splice(index, 1)
                          // vm.data1 = data1
                          this.query()
                          vm.$alert({
                            title: '提示',
                            content: re.data.data
                          })
                        }
                      })
                      .catch(er => {})
                  }
                }
              },
              '删除'
            )
          ])
        }
      }
      ],
      data1: [],
      templateData1: [],
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  created () {
    this.$ajax = this.$util.ajax(this.$appContext.marvels_core_product)
    var vm = this
    var state = sessionStorage.getItem('cpyscs1')
    vm.submit = state
    // 初始化下拉框
    this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/findProductMappedSelector', {}).then(re => {
      var allData = re.data.data
      // 产品版本号
      if (allData && allData.versions && allData.versions.length > 0) {
        vm.productVersionList.push({
          value: '',
          label: '请选择'
        })
        allData.versions.forEach(item => {
          vm.productVersionList.push({
            value: item.productVersion,
            label: item.productVersion
          })
        })
      }
      // 产品大类
      if (allData && allData.products && allData.products.length > 0) {
        vm.productTypeList.push({
          value: '',
          label: '请选择'
        })
        allData.products.forEach(item => {
          vm.productTypeList.push({
            value: item.productType,
            label: item.productTypeName
          })
        })
      }
      // 客户评级
      if (allData && allData.customerTypes && allData.customerTypes.length > 0) {
        vm.gradeList.push({
          value: '',
          label: '请选择'
        })
        allData.customerTypes.forEach(item => {
          vm.gradeList.push({
            value: item.customerType,
            label: item.customerTypeDesc
          })
        })
      }
    }).catch(er => {})
    this.getOrgInfoList(null, 1, 0)
    this.query()
  },
  methods: {
    getOrgInfoList (orgCode, level, index, changeType) {
      let vm = this
      var param = {
        parentOrgCode: orgCode,
        orgLevel: level,
        status: 0
      }
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/findOrgInfoList', param).then(re => {
        if (level === 1) {
          var list = re.data.data.list || []
          this.firstChannelList = []
          list.forEach(item => {
            this.firstChannelList.push({
              label: item.orgName,
              value: item.orgCode
            })
          })
        } else if (level === 2) {
          if (changeType === 'Y') {
            vm.templateData1[index].secondOrgCode = null
            vm.templateData1[index].secondOrgName = null
            vm.templateData1[index].thirdOrgCode = null
            vm.templateData1[index].thirdOrgName = null
          }
          // console.log(vm.templateData1[index])
          let list = re.data.data || []
          vm.secondChannelList = []
          vm.secondChannelList.push({
            label: '请选择',
            value: null
          })
          list.forEach(item => {
            vm.secondChannelList.push({
              label: item.orgName,
              value: item.orgCode
            })
          })
        } else if (level === 3) {
          if (changeType === 'Y') {
            vm.templateData1[index].thirdOrgCode = null
            vm.templateData1[index].thirdOrgName = null
          }
          let list = re.data.data || []
          vm.thirdChannelList = []
          vm.thirdChannelList.push({
            label: '请选择',
            value: null
          })
          list.forEach(item => {
            vm.thirdChannelList.push({
              label: item.orgName,
              value: item.orgCode
            })
          })
        }
      }).catch(er => {})
    },
    // 分页
    handlePageChange (index) {
      this.currentPage = index
      var vm = this
      var param = {
        productVersion: vm.productVersion,
        productType: vm.productType,
        productCode: vm.productCode,
        tenor: vm.tenor,
        grate: vm.grate,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProductMapped', param)
        .then(re => {
          vm.data1 = re.data.data.list
          this.templateData1 = JSON.parse(JSON.stringify(this.data1))
          this.total = re.data.data.total
          this.currentPage = re.data.data.pageNum
        })
        .catch(er => {})
    },
    handleRouteGo (pathName) {
      this.$router.push(pathName)
    },
    // 查询
    query () {
      var vm = this
      var param = {
        productVersion: vm.productVersion,
        productType: vm.productType,
        productCode: vm.productCode,
        tenor: vm.tenor,
        grate: vm.grate,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProductMapped', param)
        .then(re => {
          vm.data1 = re.data.data.list
          // console.log(vm.data1)
          this.templateData1 = vm.data1
          this.total = re.data.data.total
          this.currentPage = re.data.data.pageNum
        })
        .catch(er => {})
    },
    // 级联查询
    productTypeCheck () {
      var vm = this
      // 获取产品小类
      vm.productCodeList = []
      vm.productCode = ''
      vm.productCodeList.push({
        value: '',
        label: '请选择'
      })
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchByVersion', {
        productType: vm.productType,
        productVersion: vm.productVersion,
        isValid: '0'
      })
        .then(re => {
          var allData = re.data.data
          for (var i = 0; i < allData.length; i++) {
            vm.productCodeList.push({
              value: allData[i].productCode,
              label: allData[i].productName
            })
          }
        })
        .catch(er => {})
      // 根据产品大类获得期数
      var tmp = []
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchChannelAndTerm', {
        productType: vm.productType
      })
        .then(re => {
          for (var i = 0; i < re.data.data.termList.length; i++) {
            tmp.push({
              value: re.data.data.termList[i].term + '',
              label: re.data.data.termList[i].term + '期'
            })
          }
          vm.tenorList = tmp
        })
        .catch(er => {})
    },
    productVersionCheck () {
      // 点击版本查询产品小类
      var vm = this
      vm.productCodeList = []
      vm.productCode = ''
      vm.productCodeList.push({
        value: '',
        label: '请选择'
      })
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchByVersion', {
        productType: vm.productType,
        productVersion: vm.productVersion
      })
        .then(re => {
          var allData = re.data.data
          for (var i = 0; i < allData.length; i++) {
            vm.productCodeList.push({
              value: allData[i].productCode,
              label: allData[i].productName
            })
          }
        })
        .catch(er => {})
    }
  }
}
</script>

<style lang="less">
.cpyscs {}
</style>
